<template>
  <div id="app">
    <!-- 头部区域 -->
    <div class="nav">
      <van-image
        round
        width="92px"
        height="92px"
        fit="cover"
        class="avatar"
        :src="info.photo"
      />
      <div class="right">
        <h4>{{ info.name }}</h4>
        <span>{{ info.birthday }}</span>
      </div>
    </div>
    <!-- 连接区域 -->
    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o"></van-icon>
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" class="two-icon"></van-icon>
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" class="three-icon"></van-icon>
        <span>阅读历史</span>
      </van-col>
    </van-row>
    <!-- 功能区域 -->
    <van-cell-group>
      <van-cell icon="edit" title="编辑资料" is-link to="/mine/edit" />
      <van-cell icon="chat-o" title="晓晓同学" is-link to="/mine/chat" />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="warning-o" @click="logout" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { userInfoAPI } from '@/api/index.js'
export default {
  data () {
    return {}
  },
  created () {
    this.$store.dispatch('reqUserInfo')
  },
  computed: {
    // 相当于给state里的userInfo起了别名叫info
    info () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    logout () {
      // 要删除token(本地存储和vuex里的token)
      this.$store.commit('logout')
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  // 头部
  .nav {
    height: 132px;
    background-color: #338bff;
    display: flex;
    align-items: center;
    .avatar {
      margin: 0 20px 0 22px;
    }
    .right {
      h4 {
        color: white;
        font-size: 18px;
        margin-bottom: 6px;
      }
      span {
        background-color: #fff;
        color: #338bff;
        padding: 2px 4px;
        border-radius: 2px;
      }
    }
  }
  // 连接区域
  .van-col {
    height: 82px;
    display: flex;
    // 切换主轴的排列方向
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(250, 250, 250);
    .van-icon {
      font-size: 36px;
      color: #8daaff;
      &.two-icon {
        color: rgb(247, 51, 17);
      }
      &.three-icon {
        color: #ffaf6b;
      }
    }
  }
}
</style>
